<template>
  <el-table v-loading="loading" :data="pageData.data" @sort-change="changeTableSort" style="width: 100%;font-size: 12px;" >
    <template v-for="item in columns">
      <el-table-column  :key="index" :label="item.title" :prop="item.key" :width="item.width" v-if="item.width<500">
        <template v-if="item.title==='图片'" #default="scope">
          <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.imgUrl"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="[scope.row.imgUrl]"
              :initial-index="4"
              fit="cover"
          />
        </template>
      </el-table-column>
      <el-table-column  :key="index" :label="item.title" :prop="item.key"  v-else>
        <template v-if="item.title==='图片'" #default="scope">
          <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.imgUrl"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="[scope.row.imgUrl]"
              :initial-index="4"
              fit="cover"
          />
        </template>
      </el-table-column>
    </template>


  </el-table>
      <div class="page">
        <el-pagination background  v-model::current-page="searchObject.page" :page-sizes="[10, 20, 50, 100]"
                       v-model::page-size="searchObject.size" layout="total, sizes, prev, pager, next, jumper"
                       :total="pageData.total" @size-change="sizeChange" @current-change="pageChange">
        </el-pagination>
      </div>
</template>
<script setup>
import {onMounted, ref, watch} from "vue";
import http from "@/utils/request";

const columns = ref([])
const pageData = ref({
  data: [],
  total:0
})
const model = ref({})
const loading = ref(false)
const props = defineProps({
  searchObject: {
    type: Object,
    default: {}
  }
})
onMounted(async() => {
  await getColumnsData()
  await getTableData()
})
watch(() => props.searchObject.model, async(newQuery, oldQuery) => {
  await getColumnsData()
  await getTableData()
}, {
  deep: true // 确保深度监控查询参数的变化
});
const getColumnsData = async() => {
  let res = await http.post("/queryTemplate/view", {
    id: props.searchObject.model,
    queryType:1
  });
  if(res.code===200) {
    columns.value = res.data.extData.fields;
    model.value=res.data;
  }
}

const getTableData = async()=>{
  loading.value = true

  let url;
  //1分页 2列表 3批量查询
  if (model.value.queryType===1){
    url="/data/search"
  }else if (model.value.queryType===2){
    url="/data/list"
  }else{
    url="/data/list"
  }
  let res = await http.post(url, props.searchObject);
  loading.value = false
  if (res.code === 200) {
    pageData.value = res;
  }
}


const changeTableSort = () => {

}
const getSummaries = (param) => {
  const { columns, data } = param
  const sums = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计'
      return
    }
    const values = data.map((item) => item[column.property])
    if (!values.every((value) => typeof value !== 'number')) {
      sums[index] = `${values.reduce((prev, curr) => {
        const value = Number(curr)
        if (!Number.isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)}`
    } else {
      sums[index] = ''
    }
  })

  return sums
}
const sizeChange = (event) => {
  props.searchObject.size = event
  getTableData()
}
const pageChange = (event) => {
  props.searchObject.page = event
  getTableData()
}
defineExpose({getTableData})
</script>
<style scoped>

</style>